<template>
  <div class="calculation">
    <div class="timeout">{{timeout}}秒</div>
    <div class="question">
      <div class="title">{{question.a}}<span class="symbol">{{question.symbol}}</span>{{question.b}}</div>
      <div class="equals">=</div>
      <div class="answer">{{ timeout==0 ? question.r:'' }}</div>
    </div>
  </div>  
</template>

<script>
export default {
  name: 'CalculationPage',
  data(){
    return {
      question: {},
      timeout: 60,
      interval: null
    }
  },
  mounted(){
    this.next();
  },
  methods:{
    next(){
      this.question = this.generate();
    },
    generate(){
      const symbol = Math.random() > 0.5 ? '+' : '-';
      let a = 10 + Math.floor(Math.random() * 90);
      let b = 10 + Math.floor(Math.random() * 90);
      let r = 0;
      if(symbol == '-'){
        if(a < b){
          let t = a;
          a = b;
          b = t;
        }
        r = a - b;
      }
      else{
        r = a + b;
        if(r > 100){
          return this.generate(); 
        }
      }
      if(this.interval){
        clearInterval(this.interval);
        
      }
      this.timeout = 10;
      this.interval = setInterval(()=> {
        this.timeout --;
        if(this.timeout == 0){
          clearInterval(this.interval);
          setTimeout(()=>{
            this.next();
          }, 2000);
        }
      }, 1000)
      return {
        a, b, r, symbol
      }
    }
  }
 
}
</script>

<style scoped>
  .calculation{
    font-size: 300px;
    font-weight: bold;
    text-align: center;
    font-family:'Courier New', Courier, monospace;
  }

  .timeout{
    font-size: 100px;
    color: brown;
  }
  .question{
    display: flex;
    align-items:center;
    justify-content: center;
    
  }
  .symbol{
    color: chartreuse;
  }
  .equals{
    margin:0 40px;
    color: chartreuse;
  }
  .answer{
    color:chocolate;
    border: 20px solid #000000;
    width: 400px;
    height: 360px;
    line-height: 360px;

  }
  
</style>
